// 1. creatApp生成一个app实例对象
// 2. app.directive('指定名称', {指令的配置项})
import { useIntersectionObserver } from '@vueuse/core'
// 引入默认图片
import defaultImg from '@/assets/images/200.png'
export default {
  install (app) {
    // 定义全局指令
    // console.log('全局指令定义', app)
    app.directive('imgLazy', {
      // 指令挂载到节点上时立刻执行 并且只会执行一次
      // el: 绑定了指定的原生dom对象 img
      // binding.value:  v-imgLazy="这里表达式的值"
      mounted (el, binding) {
        // console.log('指令参数', el, binding.value)
        // 懒加载逻辑实现: 当前的el对象进入到视口之后 我们才加载对应的url
        // 使用useIntersectionObserver
        const { stop } = useIntersectionObserver(
          el,
          ([{ isIntersecting }], observerElement) => {
            // console.log(isIntersecting)
            // 可以使用isIntersecting变量的是否为true来控制ajax请求是否要发起
            if (isIntersecting) {
              // 当图片加载失败的时候使用默认图片赋值
              el.addEventListener('error', () => {
                el.src = defaultImg
              })
              // 在这里把url交给src属性
              el.src = binding.value
              // 第一次请求成功发起之后立刻停止监听
              stop()
            }
          },
          // 进入可视区域的比例是多少才执行回调 0-1 值越大 代表需要进入的面积越大
          { threshold: 0.1 }
        )
      }
    })
  }
}
